<template>
    <div>
      <div>
        <mu-tabs :value.sync="active" indicator-color="#000" class="tabbar" swipeable>
          <mu-tab>综合</mu-tab>
          <mu-tab>人气</mu-tab>
          <mu-tab>价格</mu-tab>
          <mu-tab>推荐指数</mu-tab>
        </mu-tabs>
        <div v-if="active === 0">
          <comprehensive :allGoodsList="allGoodsList"></comprehensive>
        </div>
        <div v-if="active === 1">
          <popularity :allGoodsList="allGoodsList"></popularity>
        </div>
        <div v-if="active === 2">
          <price :allGoodsList="allGoodsList"></price>
        </div>
        <div v-if="active === 3">
          <recommend :allGoodsList="allGoodsList"></recommend>
        </div>
      </div>
    </div>
</template>

<script>
  import comprehensive from '../../components/allgoods/comprehensive'
  import popularity from '../../components/allgoods/popularity'
  import price from '../../components/allgoods/price'
  import recommend from '../../components/allgoods/0'
    export default {
        name: "allgoods",
      components:{
        comprehensive,
        popularity,
        price,
        recommend
      },
      data(){
          return{
            active:0,
            allGoodsList:[],
            comprehensive:[
              {text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},{text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},{text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},
            ],
            popularity:[
              {text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},
            ],
            price:[
              {text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},{text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},
            ],
            recommend:[
              {text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},{text:'精致纯棉T恤舒适度优',
                price:'99',
                oldPrice:'199',
                liked:'520',},
            ],
          }
      },
      mounted(){
        this.axios.post("index.php?g=Web&c=Mock&o=simple&projectID=2&uri=shop/allGoods")
          .then(res => {
            const data = res.data.data.list;
            this.allGoodsList = data;
          }).catch(error => {
          console.log(error);
        })
      },

    }
</script>

<style scoped>
.mu-tabs{
  background: #fff;
}
.mu-tab{
  flex: 1;
  font-size: 15px;
  color: #666;
}
</style>
